<template>
	<div class="education-home-box" ref="eduHomePage">
		<div ref='top'>
			<header ref='header'>
				<div v-if='isTopHeader'>
					<div class="toBack" @click="back" v-if="weixin">
						<Iconfont iconClass="right" />
					</div>
					<div class="select-top-box" @click="clickSelectTop" v-if="isSelectTopBox">
						<p>{{topBJ}}</p>
						<div class="arrow-down"></div>
					</div>
					<p class="header-text">{{eduInfo.name}}</p>
					<div class="search-btn-box">
						<Iconfont iconClass="sousuo begin-search-ru" @click.native="searchTrue" />
					</div>
				</div>								
				<div  v-if="isSearch" class="search-wrap" >
		            <form  @submit.prevent action="#">
		              <input type="search" placeholder="请输入搜索关键字" v-model="searchKeyword"  @keyup.13="handelSearch" ref="inputSearch">
		            </form>
		            <Iconfont iconClass="sousuo "/>
		            <div class="cancel"  @click="cancel">取消</div>
		        </div>
			</header>
			<div class="header-content" v-if="eduInfo.intro" v-html="eduInfo.intro"></div>
			<SelectTopCom v-if="isTop" @message="callBack"></SelectTopCom>			
			<div class="nav-table" ref='navTable'>
				<ul class="parentClassUl">
					<li class="parentClassLi" :class="[$store.state.eduStore.eduParentId==v.id?'curClass':'']" v-for="(v,vIndex) in dataArray" :key="v.id" @click.stop="clickParentMenu(v.id,vIndex)">
						<p>{{v.tagName}}</p>
						<!--<p>{{v.tagName+v.id}}</p>-->
						<!-- 修改 -->
						<!-- <div class="nav-er-table" v-if="$store.state.eduStore.eduParentId==v.id">
							<ul class="childenClassUl">
								<li class="childenClassLi" :class="[$store.state.eduStore.eduChildId==w.id?'curChildClass':'']" v-for="(w,wIndex) in v.children" :key="wIndex" @click.stop="clickChildMenu(w.id)">{{w.tagName}}</li>
							</ul>
						</div> -->
					</li>
				</ul>
				<div class="select-nav-table">
					<div class="select-nav-table-img" @click="linkSenMenu()"></div>
				</div>
			</div>

				<ul class="childenClassUl" v-if="curChildList.length>0">
					<li class="childenClassLi" :class="[$store.state.eduStore.eduChildId==w.id?'curChildClass':'']" v-for="(w,wIndex) in curChildList" :key="wIndex" @click.stop="clickChildMenu(w.id)">{{w.tagName}}</li>
				</ul>
					

		</div>
        <div class="mask" v-show="maskShow" @touchmove.prevent></div>
        <div class="searchNone" v-if="isSearchNone">
            <img src="../../../assets/images/searchNone.png"/>
            <p>没有找到相关视频</p>
        </div>
		<div class="main-connect">
            <ul class="h-great-list">
			    <li  @click="clickLookBack(v.vid)" v-for="(v,i) in videoArray" :key="i">
			    	<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" v-on:click.self.prevent/>
			    	 <p>{{v.title}}</p>
			    </li>
			  </ul>
		</div>
	</div>
</template>

<script>
	import SelectTopCom from "./selectTopCom";
	import wxApi from "../../../util/wxApi";
	import {data} from  '../../../store/dataList'
	export default {
		mixins: [wxApi],
		data() {
			return {
				isTop: false,
				isSearch:false,//搜索框
				isTopHeader:true,
				maskShow:false,
				searchKeyword:'',
				isSearchNone:false,//没有视频
				isSelectTopBox:false,//头部班级按钮显示不显示
				//选中的班级
				topBJ: '',//头部班级文字
				checkedBJ:'',//选中的班级id
				
				dataArray: [], //菜单数组数据
				curClass: '', //父级菜单选中样式
				numParentId: '', //菜单父级默认
				curChildList:[],//子菜单列表
				curChildClass: '', //子菜单菜单选中样式
				numChildId: '', //子菜单默认
				
				checkedProvince:'',//选中的省份type值
				locCheckedProvince:'',//缓存里面的省份
				
				checkType:'',//当前选中菜单的id
				
				videoArray:[],//main视频数组
				eduId:'',//url上面的id
				eduInfo:'',//乐知教育信息
				
				isPage:true,//滚动加载的开关
				page:1,//默认是第一页
				weixin:window.terminal.weixin,
				
				
			}
		},
		components: {
			SelectTopCom,
		},
		activated(){
           this.$store.dispatch('hideNav');
		},
		destroyed() {
		},
		created() {	
			this.eduId = this.$route.query.id;//url上面的id
			this.getMenuData();	
			this.getEduInfoData();//乐知教育信息
			this.dotNum();
			this.getSelectTopData();//头部班级列表
			//处理头部的班级
			let setBJ = window.localStorage.getItem('setBJ'+this.$route.query.id);
			if(setBJ){//有值	
				this.topBJ = JSON.parse(setBJ).tagName;
				this.checkedBJ = JSON.parse(setBJ).id;
			}else{//无值
				this.topBJ = '全部';
				this.checkedBJ =  '';
			}						
			//选择的省份  
			this.locCheckedProvince = window.localStorage.getItem('setProvince'+this.$route.query.id);
			//console.log(JSON.parse(this.locCheckedProvince))
			if(JSON.parse(this.locCheckedProvince)){//有值
				this.checkedProvince = JSON.parse(this.locCheckedProvince).type
			}else{
				this.checkedProvince = ''
			}														
		},
		mounted() {
			
			let _this = this;
			_this.$refs.eduHomePage.onscroll = function() {
				let scrollTop = _this.$refs.eduHomePage.scrollTop; //197
				_this.boxScroll = scrollTop; //游客覆盖层距离顶部位置
				let windowHeight = _this.$refs.eduHomePage.clientHeight; //375
				let scrollHeight = _this.$refs.eduHomePage.scrollHeight; //572
				//console.log("scrollTop:"+scrollTop + "scrollHeight:"+scrollHeight +"windowHeight:"+windowHeight) 
				if(scrollTop + windowHeight >= scrollHeight && _this.isPage) {
					 _this.isPage = false;
					 _this.page++;
					 let tagId = _this.$store.state.eduStore.eduSonId || _this.$store.state.eduStore.eduChildId|| _this.$store.state.eduStore.eduParentId
				//this.getVideoArray(this.page,this.eduId,this.checkedBJ,this.checkedProvince,tagId)
		     //视频列表  page 页码    pageSize 一页的个数   typeId 专辑的id  gradeId 年纪的id   cityId城市的id   tagsId标签的id
				_this.$http.get("/h5live/getTspdVideos?page="+_this.page+"&pageSize=10"+"&typeId="+_this.eduId+"&gradeId="+_this.checkedBJ+"&cityId="+_this.checkedProvince+"&tagsId="+tagId)
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length){
								 _this.isPage = true ;//有长度的时候打开开关
								_this.videoArray =[..._this.videoArray,...res.data.data];
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
				}
			}
		},
		computed: {
		    isLoadIcon() {
		      if(this.$store.state.SysOrgInfo.icon && this.eduInfo != ''){
		         this.wxRegister(this.wxRegCallback);
		         return true
		      }else{
		         return false
		      }
		    }
		  },
		watch:{
		    isLoadIcon(val,oldVal){
		    }
		  },
		methods: {
			getSelectTopData() { //头部列表数据
				this.$http.get("/h5live/getTspdGrade?typeId="+this.$route.query.id)
					.then(res => {
						if(res.data.code == "000000") {						
							if(res.data.data.length){//有值
								window.localStorage.setItem('topBJDataArray',JSON.stringify(res.data.data));
								this.isSelectTopBox = true;
							}else{//无值 不显示按钮
								this.isSelectTopBox = false;
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			dotNum() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "featureId_"+_this.eduId, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			wxRegCallback() {
				let opstion = {
					link: window.location.href+'&wxShare=1',
					title: this.eduInfo.shareTitle || '【' + this.$store.state.SysOrgInfo.name + '】一起来看直播吧！', // 分享标题
					desc: this.eduInfo.shareDesc || "精彩直播，尽在" + this.$store.state.SysOrgInfo.name + "手机直播！", //分享描述
					imgUrl: this.eduInfo.imagurlShare || this.$store.state.SysOrgInfo.icon,
					success: function() {
						//alert("分享成功");
					},
					error: function(e) {
						//alert('分享失败:'+JSON.stringify(e))
					}
				};
				this.ShareTimeline(opstion);
			},
			getEduInfoData(){
				//请求特色频道信息     
				this.$http.get("/h5live/getTspdAlbum?zjId="+this.eduId).then(
					res => {
						if(res.data.code=='000000'){
                            this.eduInfo = res.data.data;
                            this.wxRegCallback();
						}else{
							console.log("接口报错")
						}
						
						}
					);
			},
			clickLookBack(vid){//跳转到回看视频
				this.$router.push(`/${this.$channel}/lookBack_particulars/${vid}`)				
			},
			back(){//返回
				this.$router.push(`/${this.$channel}/featureHome`)
			},
			searchTrue() { //点击搜索页面
              this.isTopHeader = false
              this.isSearch = true;
              this.maskShow = true;
              this.searchKeyword='' ;
              let _this = this
              setTimeout(()=>{//不加延迟 控制台报错 报错'focus' of undefined
	     	    _this.$refs.inputSearch.focus();
	     	},1000)
			},
			//取消
			cancel(){
			  this.isTopHeader = true
              this.isSearch = false
               this.maskShow = false
               this.searchKeyword=''
			},
			    //开始搜索
			    handelSearch(){
			      this.maskShow=false
			      this.$refs.inputSearch.blur();
			      this.$router.push({
			        path: `/${this.$channel}/liveMoreSearch`,
			        query: {
			          content: this.searchKeyword,
			          type: this.checkType,
			          id:this.eduId,
			          page:'eduPage'
			        }
			      })	
			    },
			clickSelectTop() { //头部选择
				this.isTop = true
			},
			linkSenMenu() {//菜单详情
				this.$router.push({
					path:`/${this.$channel}/secondMenu`,
					query:{//父标签的id
						tagId:this.numParentId,
						id:this.eduId
					}
				})
			},
			clickParentMenu(id,index) { //点击父级菜单
				this.page = 1;
				this.isPage = true;//开启滚动
				this.numParentId = id;
				this.videoArray = [];
				this.$store.dispatch('setEduParentId',id);
				this.$store.dispatch('setEduSonId','')//三级id
				if(this.dataArray[index].children.length){
					this.$store.dispatch('setEduChildId',this.dataArray[index].children[0].id)
					this.curChildList= this.dataArray[index].children
				}
				let tagId = this.$store.state.eduStore.eduSonId || this.$store.state.eduStore.eduChildId|| this.$store.state.eduStore.eduParentId
				this.getVideoArray(this.page,this.eduId,this.checkedBJ,this.checkedProvince,tagId)
			},
			clickChildMenu(id) { //点击子级菜单
				this.page = 1;
				this.isPage = true;//开启滚动
				this.videoArray = [];
				this.numChildId = id;
				this.$store.dispatch('setEduChildId',id)
				this.$store.dispatch('setEduSonId','')//三级id
				let tagId = this.$store.state.eduStore.eduSonId || this.$store.state.eduStore.eduChildId|| this.$store.state.eduStore.eduParentId
				this.getVideoArray(this.page,this.eduId,this.checkedBJ,this.checkedProvince,tagId)//页码   专辑的id  年级id  城市id  标签id
			},
			callBack(msg) {
				switch(msg.type) {
					case 'close':
						this.isTop = false
						break;
					case 'data':
						this.page = 1;
						this.isPage = true;//开启滚动
						this.topBJ = msg.data.tagName;
					    //这里要请求接口拿到 选择的年纪要从loc里面拿
					    this.checkedBJ = msg.data.id;//当前页面没有刷新 确保当前点击按钮值改变
					    this.videoArray = [];
					    let tagId = this.$store.state.eduStore.eduSonId || this.$store.state.eduStore.eduChildId|| this.$store.state.eduStore.eduParentId
						this.getVideoArray(this.page,this.eduId,msg.data.id,this.checkedProvince,tagId)//页码   专辑的id  年级id  城市id  标签id
						break;
					case value:
						break;
					case value:
						break;
					default:
						break;
				}
			},
			getVideoArray(page,typeId,gradeId,cityId,tagsId){//视频列表  page 页码    pageSize 一页的个数   typeId 专辑的id  gradeId 年纪的id   cityId城市的id   tagsId标签的id
				this.$http.get("/h5live/getTspdVideos?page="+page+"&pageSize=10"+"&typeId="+typeId+"&gradeId="+gradeId+"&cityId="+cityId+"&tagsId="+tagsId)
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.length){
								this.isSearchNone  = false;
								this.videoArray = res.data.data;
							}else{
								console.log('数组为空暂无数据')
								this.isSearchNone  = true
							}
						}
					})
					.catch(response => {
						this.isSearchNone  = true
						console.log(response);
					});
			},
			
			getMenuData() { //列表数据
				this.$http.get("/h5live/getTspdTags?typeId="+this.eduId)
					.then(res => {
						if(res.data.code == "000000") {
							window.localStorage.setItem("numNavData",JSON.stringify(res.data.data))	
							this.numParentId = res.data.data[0].id//父第一个高亮
							//this.numChildId = res.data.data[0].children[0].id;//子级第一个高亮
							if(res.data.data[0].children.length){//不为零
								this.numChildId = res.data.data[0].children[0].id;//子级第一个高亮
								if(!this.$store.state.eduStore.eduChildId){//无值
								this.$store.dispatch('setEduChildId',res.data.data[0].children[0].id)
							 }
							}
							if(!this.$store.state.eduStore.eduParentId){//无值的时候
								this.$store.dispatch('setEduParentId',this.numParentId)
							}else{//父有值
							}
							this.dataArray = res.data.data;
							this.curChildList= this.dataArray[0].children
							let tagId = this.$store.state.eduStore.eduSonId || this.$store.state.eduStore.eduChildId|| this.$store.state.eduStore.eduParentId
							this.getVideoArray(this.page,this.eduId,this.checkedBJ,this.checkedProvince,tagId)//页码   专辑的id  年级id  城市id  标签id
							
						}
					})
					.catch(response => {
						console.log(response);
					});
			}
		}
	}
</script>

<style scoped="scoped">
	::-webkit-scrollbar {
	  height: 0;
	  width: 0;
	  color: transparent;
	   display: none;
	}
	::-webkit-scrollbar {
   
}
	.curClass {
		font-weight: 500 !important;
		color: #F12200 !important;
		/*text-shadow: 0px 8px 14px rgba(255, 0, 0, 0.08) !important;*/
	}
	

	.education-home-box {
		width: 100vw;
		height: 100vh;
		background: white;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	header .toBack {
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 20px;
	}
	
	header .toBack i {
		font-size: 34px;
		color: #000;
	}
	
	header {
		position: relative;
		background: white;
		top: 0;
		left: 0;
	}
	
	header .header-text {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}
	
	.header-content {
		width: 100%;
		/*background: pink;*/
		padding: 20px 26px;
		text-align: justify;
		line-height: 36px;
		color: #666666;
		text-indent: 65px;
		font-size: 30px;
		box-shadow: 1px 2px 0.3rem 0 rgba(0, 0, 0, 0.06);
		border-radius: 0px 0px 6px 6px;
	}
	
	.select-top-box {
		height: 80px;
		background: transparent;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		top: 0;
		left: 80px;
	}
	
	.select-top-box p {
		max-width:168px ;
		font-size: 28px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		 overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.arrow-down {
		width: 32px;
		height: 33px;
		background: url(../../../assets/images/arrow-down.png) no-repeat;
		background-size: 32px 33px;
	}
	
	.search-btn-box {
		height: 80px;
		position: absolute;
		top: 0;
		right: 30px;
		display: flex;
		align-items: center;
	}
	
	.begin-search-ru {
		font-size: 40px;
	}
	
	.nav-table {
		position: relative;
		margin-top: 10px;
	}	
	.select-nav-table {
		width: 120px;
		height: 82px;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background: url(../../../assets/images/tranWhite.png) no-repeat;
		background-size: 120px 92px;
		/*background: darkgoldenrod;*/
	}
	
	.select-nav-table-img {
		width: 64px;
		height: 42px;
		background: url(../../../assets/images/select-nav.png) no-repeat;
		background-size: 64px 52px;
		margin-right: 30px;
	}
	
	/*.nav-er-table {
		position: absolute;
		top: 94px;
		left: 0;
	}
	.nav-table ul {
	   width: 750px;
       white-space: nowrap;
       overflow-x: scroll;
       padding:  30px;
	   background: pink;
	}
	.nav-er-table ul li{
	    float: left;
	}*/

	.parentClassUl{
		width: 750px;
        white-space: nowrap;
        overflow-x: scroll;
        padding:  30px 120px 20px  30px;
       /* -webkit-overflow-scrolling: touch;*/
     /* background: pink;*/
	}
	.parentClassLi{
		display: inline-block;
		background:white;
		margin-right: 36px;
		font-size:28px;
	}
	.nav-er-table{
		position: absolute;
		top: 72px;
		left: 30px;
		background: forestgreen;
	}

	.childenClassUl {
		width: 750px;
        white-space: nowrap;
        overflow-x: scroll;
		/* padding:  20px 30px 10px 0; */
        padding:  10px 30px 20px 30px;
        font-size: 24px;
	}
	.childenClassLi{
		display: inline-block;
		background:white;
		margin-right: 20px;
		border-radius: 20px;
		border: 2px solid #B3B3B3;
		padding: 0 10px;
		height: 40px;
        line-height: 42px;
		text-align: center;
	    padding: 0 22px;
		color: #B3B3B3;
	
		
	}
.curChildClass {
		background: rgba(255, 0, 0, 1) !important;
		border-radius: 20px;
		border: 2px solid rgba(255, 0, 0, 1) !important;
		color: white !important;
		height: 40px !important;
		line-height: 42px !important;
		padding: 0 22px !important;
	}
	
	.main-connect {
		width: 100vw;
		background: white;
		/* margin-top: 70px; */
	}
	
	
	.h-great-list {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  padding: 0 30px 20px;
  font-size: 0;
}

.h-great-list li {
  width:330px;
  margin-top: 22px;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  background: rgba(255, 255, 255, 1);
}

.h-great-list li:nth-child(even) {
  margin-left: 30px;
}

.h-great-list li img {
  width: 100%;
  height: 187px;
  border-radius: 12px;
}
.h-great-list li p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
 vertical-align: middle;
  font-size: 26px;
 text-align: justify;
  color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
 
}

.h-great-list-info {
  padding: 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-flex-align-items: center;
}

.h-great-list-info i {
  font-size: 42px;
}

.h-great-list-info span {
  color: #000;
  font-size: 26px;
   height: 42px;
  line-height: 38px;
}
.search-wrap{
	width: 100%;
	height: 80px;
  display: flex;
  padding-left: 20px;
  align-items:center;
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
}

.search-wrap.searchShow{
  opacity: 1;
}
.search-wrap i{
  position: absolute;
  left:50px;
  font-size: 30px;
  color: #666;
  top:28px;
}
.search-wrap input{
  width: 620px;
  height: 60px;
  background:rgba(246,246,246,1);
  border-radius:30px;
  background: #F6F6F6;
  box-sizing: border-box;
  padding-left: 80px;
  font-size: 30px;
}
.search-wrap .cancel{
  margin-left: 30px;
  font-size: 28px;
  color: #333;
}
.mask{
  width: 100vw;
  height: calc(100vh - 80px);
  position: fixed;
  top:80px;
  background:rgba(0,0,0,1);
  opacity:0.4;
  z-index: 10;
}
.searchNone{
	text-align: center;
	margin-top: 15vh
}
.searchNone img{
	width: 232px;
}
.searchNone p{
	color: #444;
	font-size: 32px;
	margin-top: 55px;
}

</style>